<template>
  <a-popover position="bottom">
    <template #content>
      <div class="custom-basic-info flex">
        <div class="label">定制类型：</div>
        <div class="value">{{ $extract(info, 'customType') }}</div>
      </div>
      <div class="custom-basic-info flex">
        <div class="label">材质：</div>
        <div class="value">{{ $extract(info, 'material') }}</div>
      </div>
      <div class="custom-basic-info flex">
        <div class="label">刻字内容：</div>
        <div class="value">{{ $extract(info, 'fontTxt') }}</div>
      </div>
      <div class="custom-basic-info flex">
        <div class="label">字体：</div>
        <div class="value">{{ $extract(info, 'fontFamily') }}</div>
      </div>
      <div class="custom-basic-info flex">
        <div class="label">电镀颜色：</div>
        <div class="value">{{ $extract(info, 'platinColor') }}</div>
      </div>
      <div class="custom-basic-info flex">
        <div class="label">戒指尺码：</div>
        <div class="value">{{ $extract(info, 'ringSize') }}</div>
      </div>
      <div class="custom-basic-info flex">
        <div class="label">石头：</div>
        <div class="value">{{ $extract(info, 'stone') }}</div>
      </div>
      <div class="custom-basic-info flex">
        <div class="label">链条：</div>
        <div class="value">{{ getfittingName(info) }}</div>
      </div>
      <div class="custom-basic-info flex">
        <div class="label">字印：</div>
        <div class="value">{{ $extract(info, 'fontPrint') }}</div>
      </div>
      <div class="custom-basic-info flex">
        <div class="label">备注：</div>
        <div class="value">{{ $extract(info, 'remark') }}</div>
      </div>
    </template>
    <div>
      <div class="custom-basic-info flex">
        <div class="label">定制类型：</div>
        <div class="value">{{ $extract(info, 'customType') }}</div>
      </div>
      <div class="custom-basic-info flex">
        <div class="label">材质：</div>
        <div class="value">{{ $extract(info, 'material') }}</div>
      </div>
    </div>
  </a-popover>
</template>

<script lang="ts" setup>
  import { PropType } from 'vue'
  import { getStrVal } from '@/utils'
  const props = defineProps({
    info: {
      type: Array as PropType<Array<any>>,
      default: () => {},
    },
  })

  const getfittingName = (data: any) => {
    let arr = data?.chainList || []
    return arr.map((e: any) => e.fittingName).join(',')
  }
</script>

<style lang="less" scoped></style>
